<template>
  <div class="table-box">
    <Table
        ref="table"
        :searchColumns="searchColumns"
        @getTableList="getTableList"
    >
      <template #tableHeader="scope">

        <el-button type="danger" :icon="Delete"
                   :disabled="BatchDeleteAble"
                   plain @click="deleteSelectionLoginLog">
          批量删除
        </el-button>
      </template>
      <template #table>
        <!-- 表格主体 -->
        <el-table :data="tableList"
                  @selection-change="handleSelectionChange"
                  border
                  style="width: 100%">
          <el-table-column fixed type="selection" width="55" align="center"/>
          <el-table-column prop="project.project_name" fixed="left" align="center" label="项目名称" width="100"/>
          <el-table-column prop="case.case_name" align="center" label="Ui用例名称" width="150"/>
          <el-table-column prop="start_time" align="center" label="开始时间" min-width="180"/>
          <el-table-column prop="end_time" align="center" label="结束时间" min-width="180">
            <template #default="scope">
              <span v-show="scope.row.elapsed_time">{{scope.row.end_time}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="elapsed_time" align="center" label="运行耗时" min-width="180"/>
          <el-table-column prop="status_display" align="center" label="执行状态" width="150"/>
          <el-table-column prop="msg" align="center" label="执行结果" width="150">
            <template #default="scope">
              <el-tag size="small" type="success" v-if="scope.row.status===3 && scope.row.is_success===true">success</el-tag>
              <el-tag size="small" type="danger" v-if="scope.row.status===3 && scope.row.is_success===false">fail</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作" min-width="150px">
            <template #default="scope">
              <el-button
                  size="small"
                  @click="showUiTestCaseLogDrawer(scope)"
                  type="info">详情
              </el-button>
              <el-button
                  size="small"
                  @click="deleteLoginLog(scope)"
                  type="danger">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </Table>
    <el-drawer v-model="uiTestCaseLogDrawer"
               :append-to-body="true"
               :close-on-click-modal="true"
               direction="rtl" :size="1000">
      <template #header>
        <div class="description-drawer-header">
          <span>测试执行记录详情</span>
        </div>
        <span></span>
      </template>
      <template #default>

        <el-descriptions
            class="margin-top"
            title="测试执行信息"
            :column="3"
            border
        >

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon >
                  <location />
                </el-icon>
                耗时
              </div>
            </template>
            {{testSourceData.elapsed_time}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <user />
                </el-icon>
                开始执行时间
              </div>
            </template>
            {{testSourceData.start_time}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <iphone />
                </el-icon>
                结束执行时间
              </div>
            </template>
            {{testSourceData.end_time}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon >
                  <tickets />
                </el-icon>
                执行结果
              </div>
            </template>
            <el-tag size="small" type="success" v-if="testSourceData.status ===3 && testSourceData.is_success===true">success</el-tag>
            <el-tag size="small" type="danger" v-if="testSourceData.status ===3 &&testSourceData.is_success===false">fail</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon >
                  <office-building />
                </el-icon>
                字段名
              </div>
            </template>
            这块不知道写什么，先空着
          </el-descriptions-item>
        </el-descriptions>

        <h4>测试结果原始数据</h4>
        <div class="uiTestLogSourceDataShow">
          <AceEditor v-model:value="testSourceDataShow"
                     lang="json"
                     :readonly="true"></AceEditor>
        </div>

      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="uiTestCaseLogDrawer = false">关闭</el-button>
        </div>
      </template>
    </el-drawer>

  </div>
</template>

<script setup name="systemLog">

// 需要搜索的配置项
import {computed, onMounted, ref, watch} from "vue";
import {getUiTestCaseLogListApi,getUiTestCaseLogApi} from "@/api/modules/ui/uitest.js";
import {CirclePlus, Delete} from "@element-plus/icons-vue";
import Table from "@/components/Table/index.vue";
import {ElMessage} from "element-plus";
import AceEditor from '@/components/AceEditor/index.vue'

const searchColumns = ref([
  {label: "用例名称", field: "case_name", searchType: "input"},
])

const tableList = ref([])

onMounted(() => {
  getTableList()
})

const table = ref(null)
const searchArgsDict = ref({a:2})
const getTableList = async (searchArgs) => {
  const {data} = await getUiTestCaseLogListApi(searchArgs)
  searchArgsDict.value = searchArgs
  tableList.value = data.data
  table.value.pageable.pageNum = data.page
  table.value.pageable.pageSize = data.pagesize
  table.value.pageable.total = data.total
}

let BatchDeleteAble = ref(true)
const selectionsIds = ref([])

const handleSelectionChange = (selections) => {
  BatchDeleteAble.value = !selections.length
  selections.forEach(item => {
    selectionsIds.value.push(item.id)
  })
}


const deleteLoginLog = async (scope) => {
  // await deleteLoginInfoListApi({"ids": [scope.row.id]}).then(() => {
  //   ElMessage.success("成功");
  //   getTableList(searchArgsDict.value);
  // })
}

const deleteSelectionLoginLog = async () => {
  // await deleteLoginInfoListApi({"ids": selectionsIds.value}).then(() => {
  //   ElMessage.success("成功");
  //   getTableList(searchArgsDict.value);
  // })
}

const uiTestCaseLogDrawer = ref(false)
const testSourceData = ref({})
const testSourceDataShow = ref("")
watch(testSourceData,()=>{
  testSourceDataShow.value = JSON.stringify(testSourceData.value["run_message"], null, 4)
})
const showUiTestCaseLogDrawer = (scope)=>{
  uiTestCaseLogDrawer.value = true
      getUiTestCaseLogApi(scope.row.id).then(res=>{
        testSourceData.value = res
      })
}

</script>

<style>
@import "index.scss";
</style>
